/* eslint-disable vue/no-template-shadow */
<template>
  <a-modal
    title="查看违章信息"
    :width="1400"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false">
        <s-table
          ref="table"
          :columns="columns"
          :data="loadData"
          :alert="null"
          :rowKey="(record) => record.violationUserId"
          bordered
        >
        </s-table>
      </a-card>
    </a-spin>
  </a-modal>
</template>
<script>
  import moment from 'moment'
  import VueTextTruncate from 'vue-text-truncate'
  import { getPersonEarlyWarningListListWarning } from '@/api/modular/system/QHSEWarning'
  import { STable, XCard, XDown } from '@/components'
  export default {
    components: {
      XDown,
      XCard,
      STable,
      VueTextTruncate
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        labelCol_A: {
          xs: { span: 12 },
          sm: { span: 3 }
        },
        wrapperCol_A: {
          xs: { span: 36 },
          sm: { span: 20 }
        },
        labelCol_S: {
          xs: { span: 12 },
          sm: { span: 0 }
        },
        wrapperCol_S: {
          xs: { span: 20 },
          sm: { span: 8 }
        },
        // 表头
        columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '检查时间',
          dataIndex: 'checkDate',
          customRender: (text, record) => {
            if (record.checkDate) {
              const dateParts = record.checkDate.split('T')[0].split('-')
              return `${dateParts[0]}-${dateParts[1]}-${dateParts[2]}`
            }
            return ''
          }
        },
        {
          title: '检查人员',
          dataIndex: 'userName'
        },
        {
          title: '违章单位',
          dataIndex: 'organizationName'
        },
        {
          title: '违章人员',
          dataIndex: 'violationUserName'
        },
        {
          title: '违章性质',
          dataIndex: 'violationType'
        },
        {
          title: '作业项目',
          dataIndex: 'workItem'
        },
        {
          title: '记分',
          dataIndex: 'score',
          customRender: function(text) {
            return <span style={{ fontWeight: 'bold', color: 'red' }}>{text}</span>
          }
        },
        {
          title: '罚款',
          dataIndex: 'fine'
        },
        {
          title: '违章描述',
          dataIndex: 'description',
          customRender: (text) => (
            <a-tooltip title={text}>
              {text.length > 5 ? text.substr(0, 5) + '...' : text}
            </a-tooltip>
          )
        }
      ],
      loadData: (parameter) => {
        return getPersonEarlyWarningListListWarning(Object.assign(parameter, this.queryParam)).then((res) => {
          // console.log('res:', res.data)
          return res.data
        })
      },
      queryParam: {
        timeOn: '',
        timeEnd: '',
        violationUserId: '',
        violationUserName: '',
        organizationName: ''
      },
        count: 1,
        visible: false,
        confirmLoading: false,
        data: [],
        form: this.$form.createForm(this),
        Modalvisible: false,
        files: [],
        previewVisible: false,
        previewImage: '',
        flag: true,
        fileList: [],
        violationCategory: '',
        organizationId: '',
        organizationName: '',
        showUploadList: {
          showRemoveIcon: false,
          showDownloadIcon: false,
          showPreviewIcon: true
        },
        QHSEViolationCategoryLBTree: [],
        showFile: false
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit(record, timeOn, timeEnd, organizationName, organizationId, CheckTypes) {
        this.queryParam = {
            timeOn: timeOn,
            timeEnd: timeEnd,
            violationUserId: record.violationUserId,
            violationUserName: record.violationUserName,
            organizationName: organizationName,
            organizationId: organizationId,
            CheckTypes: CheckTypes
        }
        // console.log(record.timeOn)
        // console.log(record.timeEnd)
        // console.log(record.violationUserId)
        // this.confirmLoading = true
        this.visible = true
        this.confirmLoading = false
        this.$refs.table.refresh(true)
      },
      handleSubmit() {
        this.confirmLoading = false
        this.handleCancel()
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        // 清理子表单中数据
        this.data = []
      },
      handleModalCancel() {
        this.Modalvisible = false
      }
    }
  }
</script>
<style scoped>
  *[disabled] {
    color: black;
    background-color: whitesmoke;
    cursor: not-allowed;
    opacity: 0.5;
  }
  .ant-select-disabled {
    color: black;
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>
